<template>
    <van-nav-bar title="订单数据详情" left-text="返回" left-arrow @click-left="onClickLeft" style="margin-bottom: 20px;" />
    <div class="mouth">每月度的订单数据</div>
    <div ref="mouth" style="width: 90%; height: 400px;margin-left: 5%;"></div>
    <div class="mouth">每周度的订单数据</div>
    <div ref="week" style="width: 90%; height: 400px;margin-left: 5%;"></div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import * as echarts from 'echarts';
import { useRoute } from 'vue-router';
import http from '../http';


const route = useRoute();
const user_name = route.query.user_name;
const nums = route.query.nums;
const incom = route.query.incoms;
const up_first_year_mouth = route.query.previous_first_year_mouth;
const up_second_year_mouth = route.query.previous_second_year_mouth;
const previous_first_mouth_nums = route.query.previous_first_mouth_nums;
const previous_first_mouth_earnings = route.query.previous_first_mouth_earnings;
const previous_second_mouth_nums = route.query.previous_second_mouth_nums;
const previous_second_mouth_earnings = route.query.previous_second_mouth_earnings;
const now_year_mouth = route.query.now_year_mouth;
const colors = ref(['#5470C6', '#91CC75']);
const option = reactive({
    // 图表大小
    grid: {
        top: '10%',
        // bottom: '10%',
        left: '10%',
        right: '15%'
    },
    color: colors.value,
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    toolbox: {
        feature: {
            dataView: { show: false, readOnly: false },
            restore: { show: false },
            saveAsImage: { show: false }
        }
    },
    legend: {
        data: ['月收益', '月销量']
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            data: [up_second_year_mouth, up_first_year_mouth, now_year_mouth,]
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '月收益：元',
            position: 'right',
            alignTicks: true,
            axisLine: {
                show: true,
                lineStyle: {
                    color: colors.value[0]
                }
            },
            axisLabel: {
                formatter: '{value}'
            }
        },
        {
            type: 'value',
            name: '月销量：单',
            position: 'left',
            alignTicks: true,
            axisLine: {
                show: true,
                lineStyle: {
                    color: colors.value[1]
                }
            },
            axisLabel: {
                formatter: '{value}'
            }
        }
    ],
    series: [
        {
            name: '月收益',
            type: 'bar',
            data: [previous_second_mouth_earnings, previous_first_mouth_earnings, incom]
        },
        {
            name: '月销量',
            type: 'line',
            yAxisIndex: 1,
            data: [previous_second_mouth_nums, previous_first_mouth_nums, nums]
        }
    ]
});

// 获取本周第一天（周一）的日期
function getThisWeekFirstDay() {
    const today = new Date();
    const dayOfWeek = today.getDay(); // 获取今天是星期几（0表示周日，1表示周一，以此类推）
    const diff = today.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1); // 计算本周第一天与今天日期的差值
    const firstDay = new Date(today.setDate(diff));
    // console.log('本周第一天', firstDay);
    return formatDate(firstDay);
}
// 获取本周最后一天（周日）的日期
function getThisWeekLastDay() {
    const firstDay = getThisWeekFirstDay();
    const firstDayDate = new Date(firstDay);
    firstDayDate.setDate(firstDayDate.getDate() + 6); // 在本周第一天基础上加上6天得到周日的日期
    // console.log('本周最后一天', firstDayDate);

    return formatDate(firstDayDate);
}
// 获取上周第一天（周一）的日期
function getLastWeekFirstDay() {
    const today = new Date();
    const dayOfWeek = today.getDay();
    const diff = today.getDate() - dayOfWeek - 7 + (dayOfWeek === 0 ? -6 : 1); // 往前推一周的日期差值
    const firstDay = new Date(today.setDate(diff));
    // console.log('上周第一天', firstDay);
    return formatDate(firstDay);
}
// 获取上周最后一天（周日）的日期
function getLastWeekLastDay() {
    const firstDay = getLastWeekFirstDay();
    const firstDayDate = new Date(firstDay);
    firstDayDate.setDate(firstDayDate.getDate() + 6);
    // console.log('上周最后一天', firstDayDate);
    return formatDate(firstDayDate);
}
// 获取上上周第一天（周一）的日期
function getBeforeLastWeekFirstDay() {
    const today = new Date();
    const dayOfWeek = today.getDay();
    const diff = today.getDate() - dayOfWeek - 14 + (dayOfWeek === 0 ? -6 : 1); // 往前推两周的日期差值
    const firstDay = new Date(today.setDate(diff));
    // console.log('上上周第一天', firstDay);
    return formatDate(firstDay);
}
// 获取上上周最后一天（周日）的日期
function getBeforeLastWeekLastDay() {
    const firstDay = getBeforeLastWeekFirstDay();
    const firstDayDate = new Date(firstDay);
    firstDayDate.setDate(firstDayDate.getDate() + 6);
    // console.log('上上周最后一天', firstDayDate);
    return formatDate(firstDayDate);
}
// 格式化日期为 "YYYY-MM-DD" 的形式
function formatDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}
const now_week_mon = getThisWeekFirstDay()
const now_week_sun = getThisWeekLastDay()
const up_first_week_mon = getLastWeekFirstDay()
const up_first_week_sun = getLastWeekLastDay()
const up_second_week_mon = getBeforeLastWeekFirstDay()
const up_second_week_sun = getBeforeLastWeekLastDay()
console.log(now_week_mon);
console.log(up_first_week_mon);
console.log(up_second_week_mon);

// 每周订单统计
const now_week_price = ref(0)
const now_week_nums = ref(0)
const up_first_week_price = ref(0)
const up_first_week_nums = ref(0)
const up_second_week_price = ref(0)
const up_second_week_nums = ref(0)
function getweekorders() {
    http.get('/escort/weekendorders/', {
        params: {
            user_name: user_name,
            now_week_mon: now_week_mon,
            now_week_sun: now_week_sun,
            up_first_week_mon: up_first_week_mon,
            up_first_week_sun: up_first_week_sun,
            up_second_week_mon: up_second_week_mon,
            up_second_week_sun: up_second_week_sun,
        }
    }).then(res => {
        now_week_price.value = res.data.now_week_ls.slice(-1)[0].now_week_price
        now_week_nums.value = res.data.now_week_ls.slice(-1)[0].now_week_nums
        up_first_week_price.value = res.data.up_first_week_ls.slice(-1)[0].up_first_week_price
        up_first_week_nums.value = res.data.up_first_week_ls.slice(-1)[0].up_first_week_nums
        up_second_week_price.value = res.data.up_second_week_ls.slice(-1)[0].up_second_week_price
        up_second_week_nums.value = res.data.up_second_week_ls.slice(-1)[0].up_second_week_nums
        getoption.series[0].data = [up_second_week_price.value, up_first_week_price.value, now_week_price.value]
        getoption.series[1].data = [up_second_week_nums.value, up_first_week_nums.value, now_week_nums.value]
        console.log(now_week_price.value);
        console.log(now_week_nums.value);
        console.log(up_first_week_price.value);
        console.log(up_first_week_nums.value);
        console.log(up_second_week_price.value);
        console.log(up_second_week_nums.value);

        nextTick(() => {
            const weeks = echarts.init(week.value);
            weeks.setOption(getoption);
        });
    }).catch(err => {
        console.log(err);
    })
}

const getoption = reactive({

    color: colors.value,
    grid: {
        top: '10%',
        // bottom: '10%',
        left: '10%',
        right: '15%'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    toolbox: {
        feature: {
            dataView: { show: false, readOnly: false },
            restore: { show: false },
            saveAsImage: { show: false }
        }
    },
    legend: {
        data: ['周收益', '周销量']
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            data: [up_second_week_mon, up_first_week_mon, now_week_mon],
            // interval: 0 // x轴间隔
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '周收益：元',
            position: 'right',
            alignTicks: true,
            axisLine: {
                show: true,
                lineStyle: {
                    color: colors.value[0]
                }
            },
            axisLabel: {
                formatter: '{value}'
            }
        },
        {
            type: 'value',
            name: '周销量：单',
            position: 'left',
            alignTicks: true,
            axisLine: {
                show: true,
                lineStyle: {
                    color: colors.value[1]
                }
            },
            axisLabel: {
                formatter: '{value}'
            },
            // interval: 1 // 设置y轴刻度间隔
        }
    ],
    series: [
        {
            name: '周收益',
            type: 'bar',
            // barWidth: '30%', // 设置柱状图的宽度
            data: [up_second_week_price.value, up_first_week_price.value, now_week_price.value]
        },
        {
            name: '周销量',
            type: 'line',
            yAxisIndex: 1,
            data: [up_second_week_nums.value, up_first_week_nums.value, now_week_nums.value]
        }
    ]
});

// 每月
const mouth = ref(null);
// 每周
const week = ref(null);


onMounted(() => {
    getweekorders()
    const chart = echarts.init(mouth.value);
    chart.setOption(option);
});

const onClickLeft = () => history.back();
</script>


<style scoped>
.mouth {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: #232323;
    margin-bottom: 10px;
}
</style>